<template>
    <div class="business-wrapper">
        <div style="height: 70px;background-color: blue;display: flex;position: fixed;width: 375px">
            <div style="display: flex;justify-content: center;position: absolute;top: 23px">
                <i class="el-icon-arrow-left" style="color: white;z-index: 10000" @click="toindex"></i>
            </div>
            <div style="display: flex;align-items: center;width: 100%;justify-content: center">
                <span style="color: white;font-size: 18px">商家信息</span>
            </div>
        </div>
        <div class="base-infor">
            <div class="img-box">
                <img src="../assets/04.png" alt="">
            </div>
            <div style="font-size: 5px;color: gray;display: flex;flex-flow: column;justify-content: space-around;align-items: center;margin-top: 10px">
                <div style="font-size: 18px;color: black;font-weight: bold">不好吃面团(大连店)</div>
                <div>
                    <span>￥15起送</span><span>|</span><span>￥3配送</span>
                </div>
                <div>各种面团</div>
            </div>
        </div>
        <div class="meat-infor">
            <meat></meat>
            <meat></meat>
            <meat></meat>
            <meat></meat>
            <meat></meat>
            <meat></meat>
        </div>
        <div class="meat-footer">
            <div style="height: 10px"></div>
            <div class="footer-under">
                <div style="flex: 2.5;display: flex;background-color: gray">
                    <div v-show='this.$store.state.a === 0' style="width: 40px;height: 40px;background-color: dodgerblue;border-radius: 50%
                        ;position: absolute;bottom: 20px;margin-left: 10px;display: flex;justify-content: center;align-items: center;">
                        <i class="el-icon-shopping-cart-2" style="color: white;font-size: 23px"></i>
                    </div>
                    <div v-show='this.$store.state.a === 0' style="margin-left: 50px;height: 100%;display: flex;flex-flow: column;justify-content: space-around">
                        <div style="font-size: 16px;color: white">￥12.88</div>
                        <div style="color: white;font-size: 12px">另需配送费3元</div>
                    </div>
                </div>
                <div style="flex: 1;display: flex;justify-content: center;align-items: center;color: white;font-size: 20px" :class="{'b':!this.$store.state.a}"
                @click="todingdan">去结算</div>
            </div>
        </div>
    </div>
</template>

<script>
    import meat from "./meat";
    export default {
        name: "businessInfor",
        components:{
            meat
        },
        methods:{
            toindex(){
                this.$router.push('/');
                this.$store.state.indexCurrent = 0;
                this.$store.state.currentNumber = 1
            },
            todingdan(){
                this.$router.push('/pay')
            }
        }
    }
</script>

<style scoped>
    .business-wrapper{
        width: 375px;
        height: auto;
    }
    .business-top{
        width: 100%;
        height: 70px;
        background-color: blue;
        display: flex;
        position: fixed;
        justify-content: center;
        align-items: center;
    }
    .base-infor{
        width: 100%;
        height: 190px;
        padding-top: 70px;
        display: flex;
        flex-flow: column;
        /*justify-content: center;*/
        align-items: center;
    }
    .img-box img{
        width: 130px;
        height: 100px;
    }
    .meat-footer{
        width: 375px;
        height: 60px;
        display: flex;
        flex-flow: column;
    }
    .footer-under{
        width: 375px;
        height: 50px;
        display: flex;
        position: fixed;
        bottom: 0;
        background-color: gray;
    }
    .b{
        background-color: #42b983;
    }
</style>
